<template>
<div v-loading="loading">
    <el-button type="text" @click="goToUrl(gadgetSetting.toUrl)"> <i :class="gadgetSetting.icon" :color="gadgetSetting.iconColor"></i> {{datesource.value}}</el-button>
    <model :showSetting="queryModelDefaultSetting.showSetting" @queryModelClosed="queryModelClosed"
      :dataInfo="queryModelDefaultSetting.dataInfo" :updateGadget="upgradeGadgetSetting"/>
</div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
export default {
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data () {
    return {
      mixinViewModuleOptions: {
        pageId: this.pageId
      },
      datesource: {
        value: ''
      },
      loading: false,
      gadgetSetting: {},
      gadgetStatus: 'init',
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: this.gadgetInfo.com,
          gadgetSetting: {
            type: 'primary',
            size: 'mini',
            btnName: 'Button',
            icon: 'el-icon-star-off',
            iconColor: '',
            toUrl: '/home'
          }
        }
      }
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.query()
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
  },
  watch: {

  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      const params = {
        // businessId: this.pageId,
        gadgetId: this.id,
        includeSql: false
      }
      this.$interface.reports.getReportSettingInfo(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return _self.$message.error(res.msg)
        }
        if (res.data) {
          this.datesource.value = res.data.gadgetSetting.btnName
          _self._.merge(_self.gadgetSetting, res.data.gadgetSetting)
        }
        // _self.updateGadgetStatus('ready') //! IMPORTANT must have this code in every gadget
        _self.loading = false
      })
    },
    goToUrl (url) {
      this.$router.push({ path: url })
    }
  }
}
</script>
<style scoped>

</style>
